<template>
  <div class="user-container">
    <Header title=""></Header>
    <div class="body">
      <!-- <Carousel class="carousel" v-model="carousel" loop>
        <CarouselItem>
          <div class="carousel-item">1</div>
        </CarouselItem>
        <CarouselItem>
          <div class="carousel-item">2</div>
        </CarouselItem>
        <CarouselItem>
          <div class="carousel-item">3</div>
        </CarouselItem>
        <CarouselItem>
          <div class="carousel-item">4</div>
        </CarouselItem>
      </Carousel> -->

      <Row :gutter="30">
        <Col class="center" span="12">
        <img src="../assets/institude.png" @click="validate" class="validate"> </img>
        </Col>
        <Col class="center" span="12">
        <img src="../assets/level.png" @click="level" class="level"> </img>
        </Col>
      </Row>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../components/Header'
import Footer from '../components/Footer'

import { Component, Vue } from 'vue-property-decorator'

@Component({
  components: {
    Header,
    Footer
  }
})
export default class Home extends Vue {
  carousel = 0
  validate() {
    this.$router.push('/User/Validate')
  }

  level() {
    this.$router.push('/User?id=4')
  }
}

</script>
<style scoped>
.body {
  text-align: left;
  margin: 20rem 10% 4rem 20%;
  /* border: solid 1px #efefef; */
}
.carousel {
  height: 200px;
  margin-bottom: 2rem;
}
.carousel-item {
  height: 200px;
  line-height: 200px;
  text-align: center;
}

.validate {
  width: 250px;
  height: auto;
  cursor: pointer;
}
.validate:hover,
.level:hover {
  background: #00b04e;
  color: #fff;
}

.level {
  width: 250px;
  height: auto;
  cursor: pointer;
}
.center {
  text-align: center;
}
</style>
